<div ng-controller="bpmTraceViewController" >
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h3">流程跟踪</h1>
    </div>
    <div class="wrapper-md">
        <div class="panel panel-default">
            <div clas="col-sm-3 generateDiagram">
                <img id="generateDiagram" class="b b-a bg-white img-responsive" src="{{imgUrl}}" />
                <div ng-if="!generateDiagram">
                    <div ng-if="!v.currentActiviti" uib-popover-template='"myPopoverTemplate.html"' popover-trigger="mouseenter" popover-placement="bottom" ng-repeat="v in infos" style="position: absolute; left: {{e_offset.left + v.x - 1}}px; top: {{e_offset.top +v.y - 1}}px; width: {{v.width + 1}}px; height: {{v.height + 1}}px; opacity: 0; background-color: black;"></div>
                    <div ng-if="v.currentActiviti" uib-popover-template='"myPopoverTemplate.html"' popover-trigger="mouseenter" popover-placement="bottom" ng-repeat="v in infos" style="position: absolute; left: {{e_offset.left + v.x - 1}}px; top: {{e_offset.top +v.y - 1}}px; width: {{v.width + 1}}px; height: {{v.height + 1}}px; border: 3px solid red;"></div>
                    <script type="text/ng-template" id="myPopoverTemplate.html">
                        <table class="table table-bordered"><tr ng-repeat="(key,value) in v.vars"><td>{{key}}</td><td>{{value}}</td></tr></table>
                    </script>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <h3  class="wrapper-xs">流程综合信息-【{{processDefinition.name}}】<button ng-click="generateDiagram = !generateDiagram" class="btn btn-info">坐标错位请点击这里</button></h3>
            <table class="table m-b-none" ui-jq="footable" data-filter="#filter">
                <tr>
                    <th>流程ID</th>
                    <td>
                        {{historicProcessInstance.id}}
                        <a ng-if="parentProcessInstance.id" href="{{parentProcessInstance.id}}" style="margin-left: 2em;">父流程：{{parentProcessInstance.id}}</a>
                    </td>
                    <th>流程定义ID</th>
                    <td>{{historicProcessInstance.processDefinitionId}}</td>
                    <th>业务KEY</th>
                    <td>{{historicProcessInstance.businessKey}}</td>
                </tr>
                <tr>
                    <th>流程启动时间</th>
                    <td>{{historicProcessInstance.startTime}}</td>
                    <th>流程结束时间</th>
                    <td>{{historicProcessInstance.endTime}}</td>
                    <th>流程状态</th>
                    <td ng-if="historicProcessInstance.endTime">已结束</td>
                    <td ng-if="!historicProcessInstance.endTime">未结束</td>
                </tr>
            </table>
        </div>
        <div class="panel panel-default">
            <h3 class="wrapper-xs">活动记录</h3>
            <table width="100%" ui-jq="footable" class="table table-bordered table-hover table-condensed">
                <thead>
                <tr>
                    <th>活动ID</th>
                    <th>活动名称</th>
                    <th>活动类型</th>
                    <th>任务ID</th>
                    <th>办理人</th>
                    <th>活动开始时间</th>
                    <th>活动结束时间</th>
                    <th>活动耗时（秒）</th>
                </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="activity in activities">
                        <td>{{activity.id}}</td>
                        <td>{{activity.activityName}}</td>
                        <td>{{activity.activityType}}</td>
                        <td>{{activity.taskId}}</td>
                        <td>{{activity.assignee | sys_user_Fiter : 'name'}}</td>
                        <td>{{activity.startTime}}</td>
                        <td>{{activity.endTime}}</td>
                        <td>{{activity.durationInMillis / 1000}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="panel panel-default">
            <h3 class="wrapper-xs">表单属性</h3>
            <table width="100%" ui-jq="footable" class="table table-bordered table-hover table-condensed">
                <thead>
                <tr>
                    <th>属性名称</th>
                    <th>属性值</th>
                    <th>任务ID</th>
                    <th>设置时间</th>
                </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="prop in formProperties">
                        <td>{{prop.propertyId}}</td>
                        <td>{{prop.propertyValue}}</td>
                        <td>{{prop.taskId}}</td>
                        <td>{{prop.time}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="panel panel-default">
            <h3 class="wrapper-xs">相关变量</h3>
            <table width="100%" ui-jq="footable" class="table table-bordered table-hover table-condensed">
                <thead>
                <tr>
                    <th>变量名称</th>
                    <th>变量类型</th>
                    <th>值</th>
                </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="var in variableInstances">
                        <td>{{var.variableName}}</td>
                        <td>{{var.variableType.typeName}}</td>
                        <td>{{var.value}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>